
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta content="initial-scale=1.0, width=device-width" name="viewport">
	<title>Login - {{ global_title }}</title>

	<!-- css -->
	<link href="/static/css/base.min.css" rel="stylesheet">

	<!-- favicon -->
	<!-- ... -->

	<!-- ie -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
</head>
<body class="avoid-fout">
	<header class="header">
		<span class="header-logo">{{ global_title }}</span>
	</header>
	<div class="content">
		<div class="content-heading">
		</div>
		<div class="content-inner">
			<div class="container">
				<div class="row">
					<div class="col-lg-4 col-lg-push-4 col-sm-6 col-sm-push-3">
						<div class="card-wrap">
							<div class="card">
								<div class="card-main">
									<div class="card-header">
										<div class="card-inner">
											<h1 class="card-heading">Register</h1>
										</div>
									</div>
									<div class="card-inner">
										<p class="text-center">
											<span class="avatar avatar-inline avatar-lg">
												<img alt="Login" src="/static/images/users/avatar-001.jpg">
                                                <p style="font-family:verdana;color:red">带*为必填项</p>
											</span>
										</p>
                                        {% csrf_token %}
										<form class="form" action="javascript:void(0);">
											<div class="form-group form-group-label">
												<div class="row">
													<div class="col-md-10 col-md-push-1">
														<label class="floating-label" for="login-username">* Username</label>
														<input class="form-control" id="username" type="text">
													</div>
												</div>
											</div>
											<div class="form-group form-group-label">
												<div class="row">
													<div class="col-md-10 col-md-push-1">
														<label class="floating-label" for="login-password">* Password</label>
														<input class="form-control" id="password" type="password">
													</div>
												</div>
											</div>
											<div class="form-group form-group-label">
												<div class="row">
													<div class="col-md-10 col-md-push-1">
														<label class="floating-label" for="login-password">* Email</label>
														<input class="form-control" id="email" type="email">
													</div>
												</div>
											</div>
											<div class="form-group form-group-label">
												<div class="row">
													<div class="col-md-10 col-md-push-1">
														<label class="floating-label" for="login-password">QQ</label>
														<input class="form-control" id="qq" type="qq">
													</div>
												</div>
											</div>
											<div class="form-group">
												<div class="row">
													<div class="col-md-10 col-md-push-1">
														<button class="btn btn-block btn-blue waves-button waves-effect waves-light login">注册</button>
													</div>
												</div>
											</div>
											<div class="form-group">
												<div class="row">
													<div class="col-md-10 col-md-push-2">
                                                        <ti style="font-family:verdana;color:red"></ti>
													</div>
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
						<div class="clearfix">
							<p class="margin-no-top pull-left"><a href="javascript:void(0)">需要帮助?</a></p>
							<p class="margin-no-top pull-right"><a href="{% url 'accounts:login' %}">已有账号？登陆</a></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer class="footer">
		<div class="container">
			<a href="/">{{ global_title  }}</a>
			<a href="http://beian.miit.gov.cn/">{{ website_number  }}</a>
		</div>
	</footer>

	<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="/static/js/base.min.js"></script>
    <script type="text/javascript" src="/static/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $("body").on("click",".login",function(){
            $('button').attr('disabled', 'disabled').text('Loading...');
            $.ajax({
                url:'{% url 'accounts:register' %}',
                type:'POST',
                data:{'username':$('#username').val(),
                      'password':$('#password').val(),
                      'email':$('#email').val(),
                      'qq':$('#qq').val(),
                      'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()},
                success:function(data){
                    var dataObj=JSON.parse(data);
                    if(dataObj['status']){
                        window.location="{% url 'home_page:index' %}"
                    }
                    else{
                        $('button').removeAttr('disabled').text('注册');
                        $('ti').text(dataObj.message)
                    }
                }
            })
        })
    </script>
</body>
</html>